<template>
	<div class="about">
		<el-table :data="showList" border style="width: 100%">
			<el-table-column prop="uid" label="用户id"></el-table-column>
			<el-table-column prop="nickname" label="姓名"></el-table-column>
			<el-table-column prop="mobile" label="手机号"></el-table-column>
			<el-table-column prop="status" label="状态"></el-table-column>
			<el-table-column prop="avatar" label="头像">
				<template slot-scope="prop">
					<img :src="prop.row.avatar" />
				</template>
			</el-table-column>
			<el-table-column prop="updated_at" label="日期"></el-table-column>
			<el-table-column label="操作" width="120px">
				<template>
					<el-button icon="el-icon-search" size="mini"></el-button>
					<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="userList.length" :page-size="5" @next-click="onClickNext" @prev-click="onClickPre"></el-pagination>
	</div>
</template>

<script>
import axios from 'axios';

export default {
	data() {
		return {
			userList: [],
			showList: [],
			startIndex: 0,
			endIndex: 5,
			offset: 5
		};
	},
	methods: {
		onClickNext() {
			this.startIndex += this.offset;
			this.endIndex += this.offset;
			if (this.endIndex > this.userList.length) {
				this.endIndex = this.userList.length;
			}
			this.showList = [];
			for (let index = this.startIndex; index < this.endIndex; index++) {
				this.showList.push(this.userList[index]);
			}
		},
		onClickPre() {
			this.startIndex -= this.offset;
			if (this.startIndex < 0) {
				this.startIndex = 0;
			}

			if (this.endIndex === this.userList.length) {
				if (this.userList.length % 5 === 0) {
					this.endIndex -= this.offset;
				} else {
					this.endIndex -= this.userList.length % 5;
				}
			} else {
				this.endIndex -= this.offset;
			}
			this.showList = [];
			for (let index = this.startIndex; index < this.endIndex; index++) {
				this.showList.push(this.userList[index]);
			}
		}
	},
	mounted() {
		axios.get('http://localhost:8080/list.json').then(res => {
			console.log(res);
			this.userList = res.data;
			for (let index = this.startIndex; index < this.endIndex; index++) {
				this.showList.push(this.userList[index]);
			}
		});
	}
};
</script>

<style>
.about {
	width: 100%;
}

img {
	width: 40px;
	height: 40px;
}
</style>
